<template>
  <view>
    <view class="home">
      <view
        class="home-header"
        :style="{
          backgroundImage: `url(${swiperBgUrl})`
        }"
      >
        <van-nav-bar
          custom-style="background-color: transparent;"
          title-color="#fff"
          :border="false"
        >
          <template v-slot:title>
            <view class="home-title">首页</view>
          </template>
        </van-nav-bar>
        <view class="home-swiper">
          <swiper
            class="home-swiper-content"
            indicator-dots="true"
            autoplay="true"
            interval="3000"
            duration="500"
            circular="true"
          >
            <swiper-item
              class="home-swiper-item"
              v-for="(item, index) in carouselList"
              :key="index"
              @click="jumpCarouselDetail(item, tab)"
            >
              <image
                :src="item.imgUrl"
                mode="aspectFill"
              ></image>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <scroll-view
        class="home-scroll"
        scroll-y
      >
        <view
          v-if="token"
          class="home-notice"
          @click="jumpMessage"
        >
          <view class="home-notice-left">
            <van-image
              width="40"
              height="40"
              fit="contain"
              src="https://jiufengtea.xmtjx168.com:8090/prod-api/profile/upload/2025/06/04/home-notice_20250604204707A004.png"
            />
          </view>
          <!-- id,title,updateTime -->
          <van-cell
            class="home-notice-center"
            use-label-slot
            :border="false"
          >
            <template v-slot:title>
              <view class="home-notice-title">
                <van-icon
                  name="o"
                  :dot="!noticeInfo.status"
                  class="home-notice-icon"
                />
                {{ noticeInfo.title }}
              </view>
            </template>
            <template v-slot:label>
              <view class="home-notice-label">
                {{ noticeInfo.updateTime }}
              </view>
            </template>
          </van-cell>
          <van-icon name="arrow" />
        </view>
        <view class="home-grid">
          <van-grid
            column-num="4"
            :border="false"
          >
            <van-grid-item
              use-slot
              v-for="(item, index) in menuList"
              :key="index"
            >
              <view
                class="home-grid-item"
                @click="jumpArticle(item)"
              >
                <image
                  :src="item.iconUrl"
                  mode="aspectFill"
                  class="home-grid-image"
                ></image>
                <view>{{ item.menuName }}</view>
              </view>
            </van-grid-item>
          </van-grid>
        </view>
        <view class="home-content">
          <view class="home-tab">
            <van-tabs
              :active="tabActive"
              :color="'#0d8d6b'"
              @change="onTabChange"
            >
              <van-tab
                :title="tab.tabName"
                v-for="tab in tabList"
                :key="tab.id"
              >
              </van-tab>
            </van-tabs>
            <view class="tab-content">
              <view
                v-for="(item, index) in articleList"
                :key="index"
                @click="jumpArticleDetail(item)"
              >
                <!-- 茶介绍1、茶山3、茶工艺7 -->
                <ArticleCard
                  v-if="[1, 3, 7].includes(item.menuType)"
                  :info="item"
                />
                <!-- 茶厂4、茶商5 -->
                <ArticleCardV2
                  v-if="[4, 5].includes(item.menuType)"
                  :info="item"
                />
                <!-- 茶价格8 -->
                <ArticleCardV3
                  v-if="item.menuType === 8"
                  :info="item"
                />
                <!-- 茶赛事2 -->
                <ArticleCardV4
                  v-if="item.menuType === 2"
                  :info="item"
                />
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <TabBar
        v-if="token"
        active="home"
      />
    </view>
    <view
      v-if="!token"
      class="login-tip"
      :style="{ bottom: bottom + 'px' }"
    >
      <view class="login-tip-left">
        <van-icon
          name="info-o"
          size="36rpx"
          color="#0d8d6b"
          style="margin-right: 15rpx"
        />
        <text>亲爱的游客,登录后可查看更多内容</text>
      </view>
      <van-button
        class="login-btn"
        size="small"
        type="primary"
        color="linear-gradient(135deg, #0d8d6b 0%, #14b38f 100%)"
        round
        @click="goToLogin"
        >登录</van-button
      >
    </view>
  </view>
</template>

<script>
  import ArticleCard from '../../components/ArticleCard.vue'
  import ArticleCardV2 from '../../components/ArticleCardV2.vue'
  import ArticleCardV3 from '../../components/ArticleCardV3.vue'
  import ArticleCardV4 from '../../components/ArticleCardV4.vue'
  import TabBar from '../../components/TabBar.vue'
  import {
    getHomeBackground,
    getHomeCarousel,
    getHomeMessageNotice,
    getHomeMenu,
    getHomeTab
  } from '../../api/home.js'
  import { selectresentationDataByTabList } from '../../api/article.js'
  export default {
    components: {
      ArticleCard,
      ArticleCardV2,
      ArticleCardV3,
      ArticleCardV4,
      TabBar
    },
    data() {
      return {
        backgroundUrl: null,
        carouselList: [],
        noticeInfo: {},
        menuList: [],
        swiperBgUrl:
          'https://jiufengtea.xmtjx168.com:8090/prod-api/profile/upload/2025/06/02/bg_20250602172818A021.png',
        tabActive: 0,
        tabList: [],
        articleList: [],
        token: '',
        bottom: 0
      }
    },
    onLoad() {
      // 获取设备窗口安全区域
      const systemInfo = uni.getSystemInfoSync()
      console.log('systemInfo', systemInfo)
      const { safeAreaInsets } = systemInfo
      console.log('safeAreaInsets', safeAreaInsets)
      this.bottom = safeAreaInsets.bottom
      this.token = uni.getStorageSync('token')
      this.init()
    },
    methods: {
      init() {
        this.getHomeBackground()
        this.getHomeCarousel()
        this.getHomeMessageNotice()
        this.getHomeMenu()
        this.getHomeTab()
      },
      getHomeBackground() {
        getHomeBackground().then((res) => {
          const list = res.rows || []
          const { backgroundUrl } = list[0] || {}
          console.log('getHomeBackground', backgroundUrl)
          this.backgroundUrl = backgroundUrl
        })
      },
      getHomeCarousel() {
        getHomeCarousel().then((res) => {
          console.log('getHomeCarousel', res.rows)
          // imgUrl: "/profile/upload/2025/06/07/微信图片_20250607105446_20250607111756A003.jpg";
          // srcId: 6;
          // type: 1;
          const list = res.rows || []

          this.carouselList = list.map((item) => {
            return {
              ...item,
              imgUrl: `https://jiufengtea.xmtjx168.com:8090/prod-api${item.imgUrl}`
            }
          })
          console.log(this.carouselList)
        })
      },
      getHomeMessageNotice() {
        getHomeMessageNotice().then((res) => {
          const list = res.rows || []
          console.log('getHomeMessageNotice', res)
          this.noticeInfo = list[0]
        })
      },
      getHomeMenu() {
        getHomeMenu().then((res) => {
          const list = res.rows || []
          console.log('getHomeMenu', res)
          const diffLen = 4 - (list.length % 4)
          console.log('diffLen', diffLen)

          this.menuList = list.map((item) => {
            return {
              ...item,
              iconUrl: `https://jiufengtea.xmtjx168.com:8090/prod-api${item.iconUrl}`
            }
          })
        })
      },
      getHomeTab() {
        getHomeTab().then((res) => {
          console.log('getHomeTab', res)
          this.tabList = res.rows || []
          this.getArticleList(this.tabList[0].id)
        })
      },
      async getArticleList(id) {
        try {
          const params = {
            pageNum: 1,
            pageSize: 10,
            id
          }
          const res = await selectresentationDataByTabList(params)
          const rows =
            res?.data?.activities ||
            res?.data?.articleAnagements ||
            res?.data?.teaPriceVos ||
            []
          this.articleList = rows.map((item) => ({
            ...item,
            menuType: res.data.menuType
          }))
          console.log('this.articleList: ', this.articleList)
        } catch (error) {
          console.error('获取文章列表失败:', error)
          this.articleList = []
        }
      },
      checkLogin() {
        // 获取最新token状态
        this.token = uni.getStorageSync('token')
        if (!this.token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return false
        }
        return true
      },
      goToLogin() {
        uni.navigateTo({ url: '/pages/index/index' })
      },
      jumpArticle(item) {
        if (!this.checkLogin()) return

        const { menuName, id, menuType } = item || {}
        console.log('menuType: ', menuType)
        if (menuType === 6) {
          uni.navigateTo({ url: `/pages/association/index?id=${id}` })
        } else {
          uni.navigateTo({
            url: `/pagesA/article/index?menuName=${menuName}&id=${id}`
          })
        }
      },
      jumpCarouselDetail(item) {
        if (!this.checkLogin()) return

        const { srcId, type } = item || {}
        uni.navigateTo({
          url: `/pagesA/article/detail?id=${srcId}&menuType=${type}`
        })
      },
      // 轮播图&菜单跳转到文章详情
      jumpArticleDetail(item) {
        console.log('item: ', item)
        if (!this.checkLogin()) return
        const { id = '', menuType = '', openId = '' } = item || {}
        uni.navigateTo({
          url: `/pagesA/article/detail?id=${id}&menuType=${menuType}&openId=${openId}`
        })
      },
      onTabChange(e) {
        console.log('e: ', e)
        this.getArticleList(this.tabList[e.detail.index].id)
        this.tabActive = e.detail.index
      },
      jumpMessage() {
        if (!this.checkLogin()) return

        uni.navigateTo({
          url: `/pages/message/detail?id=${this.noticeInfo.id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f2f2f2;
  }
  .home-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;
  }
  .home-scroll {
    margin-top: 600rpx;
    flex: 1;
    overflow: hidden;
  }
  .home-title {
    color: #fff;
  }
  .home-swiper {
    display: flex;
    justify-content: center;
    width: 100vw;
    padding: 20rpx 0;
    &-content {
      width: 680rpx;
      height: 380rpx;
      border-radius: 30rpx;
      overflow: hidden;
    }
    &-item {
      width: 100%;
      height: 380rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .login-tip {
    position: fixed;
    bottom: 0;
    left: 20rpx;
    right: 20rpx;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 24rpx 30rpx;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #0d8d6b;
    border-radius: 30rpx;
    color: #0d8d6b;
    font-size: 28rpx;
    opacity: 0.95;
    backdrop-filter: blur(15rpx);
    box-shadow: 0 4rpx 20rpx rgba(13, 141, 107, 0.3),
      0 8rpx 30rpx rgba(0, 0, 0, 0.15);
    /* animation: pulse 2s infinite; */

    &-left {
      display: flex;
      align-items: center;
    }

    .login-btn {
      margin-left: 20rpx;
      font-weight: bold;
      box-shadow: 0 4rpx 8rpx rgba(13, 141, 107, 0.2);
      background-color: #fff;
      border-radius: 30rpx;
    }
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 4rpx 20rpx rgba(13, 141, 107, 0.3),
        0 8rpx 30rpx rgba(0, 0, 0, 0.15);
    }
    50% {
      box-shadow: 0 4rpx 25rpx rgba(13, 141, 107, 0.5),
        0 8rpx 35rpx rgba(0, 0, 0, 0.2);
    }
    100% {
      box-shadow: 0 4rpx 20rpx rgba(13, 141, 107, 0.3),
        0 8rpx 30rpx rgba(0, 0, 0, 0.15);
    }
  }

  .home-notice {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    background: #fff;
    &-left {
      display: flex;
      align-items: center;
    }
    &-center {
      flex: 1;
    }
    &-title {
      display: flex;
      align-items: center;
    }
    &-icon {
      margin-right: 20rpx;
    }
    &-label {
      padding-left: 20rpx;
    }
  }

  .home-grid {
    margin-top: 20rpx;
    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 30rpx;
      color: #333333;
    }
    &-image {
      width: 86rpx;
      height: 86rpx;
      margin-bottom: 19rpx;
    }
  }
  .home-content {
    margin-top: 20rpx;
    .home-tab {
      display: flex;
      flex-direction: column;
      background: #fff;
    }
    .tab-content {
      min-height: 450rpx;
    }
  }
</style>
